<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>-</title>
<%@ include file="/common/meta.jsp" %>
<link rel="stylesheet" href="${ctx}/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>

<body>

    <div class="header">
      <ul class="xbreadcrumbs" id="breadcrumbs-1">
            <li class="">
               <a href="#" class="home">系统</a>
               <ul style="display: none;">
                   <li><a href="#">登录</a></li>
                   <li><a href="#" onclick="clearScreen()">清除信息</a></li>
                   <li><a href="${ctx}/j_spring_security_logout">退出程序</a></li>
               </ul>
            </li>
            <li class="">
               <a href="#">设置</a>
               <ul style="display: none;">
                   <li><a href="#" id="statusMenu" onclick="showStatusMenu(this)"><span class="marX4 purple" >√</span>状态栏</a></li>
                   <li><a href="#"><span class="marX4 purple">√</span>自动下载所有信息</a></li>
               </ul>
            </li>
        </ul>
    </div>
	
<div id="menu-container">

 <ul id="navigationMenu">
  <li class="res"><a href="#" class="normalMenu">全部</a></li>
  <li class="res"><a href="#" class="normalMenu">货源</a></li>
  <li class="res"><a href="#" class="normalMenu">车源</a></li>
  
  <li><a href="#" class="normalMenu" onclick="showSearchBar()">查询</a></li>
  <li><a href="#" class="normalMenu">发布</a></li>
  
  <li style="float:right;font-size:16;font-weight:900;margin-right:5px;" id="showTree">
    <a href="#" class="normalMenu">&gt;&gt;</a>
  </li>
 </ul>

</div>

  <div class="ad"></div>

  <div id="content">
    <div class="bodyLeft">
	  <div class="mainTop" id="scroller_container"> 
        <div id="scroller" class="width100">
         <ul class="showInfo">
            <s:iterator value="infos">
               <li>${info}</li>
            </s:iterator>
         </ul>
        </div>
      </div>	 
	    
	  <div class="mainBottom hide">
	    <div class="searchBar">
		     关键字    <span class="marX8">内容查询</span>
		         <span class="marX8">电话查询</span>
		         <span class="marX8">编号查询</span>
		         <span class="marX8">清除保存</span>
		  
		  <span class="hand_ right" onclick="showMainAll()">X</span>
		</div>
		<div id="searchBarShow">
          <div id="scroller1" class="width100">
            <ul class="showInfo"> 
		       <li>You are my beautiful</li>			  
            </ul>
           </div>
		</div>
	  </div>
	
    </div>
    
    <!-- 地区树 -->
	<div class="bodyRight" style="display:none;" >
       <ul id="treeDemo" class="ztree">
       </ul>
    </div>
    
    
   </div>
 
<div class="tailBar">济南 | 4312</div>


<script type="text/javascript"> 
   

$(document).ready(function(){


    $('#breadcrumbs-1').xBreadcrumbs(); 	
	
	
	$("#navigationMenu li[class='res']").click(function(){
	        
	    $("#navigationMenu li a[class$='selectedMenu']").removeClass("selectedMenu").addClass("normalMenu");
		
		$(this).find(".normalMenu").removeClass("normalMenu").addClass("selectedMenu");
	   
	    //加載內容..
	});
		
	$('#navigationMenu li .normalMenu').each(function(){

		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));

	});
	
	$("#navigationMenu li[class='res']:first").click();

   var showTreeIng=false;//树形菜单是否正在显示

  $("#showTree").click(function(){
      
	  if(!showTreeIng)//展示
	  {
	     $(".bodyLeft").css("width",$(".bodyLeft").width()-205+"px");
	     $(".bodyRight").css("height",$(".bodyLeft").height()+"px").show().animate({width: '+200px'},"slow"); 
		 showTreeIng=true;
	  }
	  else
	  {
	     $(".bodyLeft").css("width",$(".bodyLeft").width()+200+"px");
	     $(".bodyRight").animate({width: '-100px'},"slow").hide();
		 showTreeIng=false;
	  } 
	  
  });
   
  //测试默认打开树 
  //$("#showTree").click();
  
  showMainAll();
  
});

var topSize=90,bottonBar=30,searchMain,searchBar=25;

//展示区域高度
var mainAll=$(window).height()-topSize-bottonBar;

function showMainAll()
{
   //隐藏searchBar
   $(".mainBottom").hide();
   
   $(".mainTop").css("height",mainAll+"px");
}

function showSearchBar()
{
   $(".mainBottom").show();
   
   $("#searchBarShow").css("height",mainAll*0.4-searchBar+"px");
   
   $(".mainTop").css("height",mainAll*0.6+"px");
}

function showStatusMenu(i)
{
	$(".tailBar").toggle();
	$(i).find("span").toggle();
}

function clearScreen()
{
	$(".showInfo").remove();
}

//加载右侧树 

		var zNodes =$.evalJSON('${cityJson}');

       //alert(zNodes.length);
       
		var setting = {
				check: {
					enable: true,
					chkboxType: { "Y" : "", "N" : "" }
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onCheck: zTreeOnCheck
				},
				view: {
					showIcon: false
				}
			};

		function zTreeOnCheck(event, treeId, treeNode) {
		    //alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
		    
		    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		    var nodes = treeObj.getCheckedNodes(true);
		    //alert(nodes.length)
		};
		
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});



</script>

</body>
</html>
